<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	<style type="text/css">
		.all,.main_div{
			padding: 1px 15px 1px 10px;
		}
		.div_header{
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			border-bottom: 1px solid;
			padding-bottom: 10px;
			padding-top: 10px;
		}
		
	</style>
</head>
<body>
	<div id="el" class="all">
		<div class="div_header">
			<div class="row">
				<div class="col-md-3">
					<span>要件名称：</span>
					<input style="width: 120px;" type="text" v-model="queryParam.item_name">
					
					<button type="button" class="btn btn-primary " @click="queryList();">查询</button>
					<button type="button" class="btn btn-primary " @click="_resetQueryParam();">重置</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12" style="text-align: right;">
					<button type="button" class="btn btn-primary " @click="toAdd();">增加</button>
					<button type="button" class="btn btn-primary " @click="toUpdate();">修改</button>
					<button type="button" class="btn btn-danger " @click="delItem();">删除</button>
					
				</div>
			</div>
		</div>
		<div class="div_main">
			<div id="div_content" class="main_div">
				<div id="mainList" style="width: 100%;">
					
				</div>
			</div>
		</div>
		
		
		
		
	<div id="addDiv" style="width: 350px; height: 230px;padding: 15px;display: none;">
		<span>要件名称：</span>
		<input style="width: 120px;" type="text" v-model="addParam.item_name">
		<br/>
		<input type="checkbox" id="mut" value="1" v-model="addParam.is_start">启用
		<input type="checkbox" id="mut" value="1" v-model="addParam.yfk_flag">预付款
		<input type="checkbox" id="mut" value="1" v-model="addParam.js_flag">结算
		<input type="checkbox" id="mut" value="1" v-model="addParam.dt_flag">电梯
		<input type="checkbox" id="mut" value="1" v-model="addParam.xf_flag">消防
		<input type="checkbox" id="mut" value="1" v-model="addParam.gsgdgq_flag">供水、供电、供气
		<br/>
		<button type="button" class="btn btn-primary " @click="addItem();">保存</button>
		<button type="button" class="btn btn-primary " @click="closeAddItem();">取消</button> 
		
		<button type="button" class="btn btn-primary " @click="updateItem();">保存修改</button>
	</div>		
		
		
	</div>
	
</body>
<script type="text/javascript">

	Vue.prototype._resetQueryParam = function(){
		//console.log(this.queryParam);
		//递归
		this.queryParam
		for(let i in this.queryParam){
			this.queryParam[i] = null;
		}
	};

	var app = new Vue({
	  	el: '#el',
	  	data: {
	  		addIndex: null,
	    	queryParam: {
	    		id: "",
	    		item_name: null
	    	},
	    	addParam: {
	    		item_name: "",
	    		is_start: "",
	    		yfk_flag: "",
	    		js_flag: "",
	    		dt_flag: "",
	    		xf_flag: "",
	    		gsgdgq_flag: ""
	    	},
	    	queryMvpItemList: []
	  	},
	  	methods: {
	  		delItem: function(){
	  			var self = this;
	  			
	  			var checkStatus = window.myTable.checkStatus('mainList'); //idTest 即为基础参数 id 对应的值
	  			if(checkStatus.data.length == 0){
	  				return;
	  			}
	  			var str = "";
	  			for(let i = 0; i < checkStatus.data.length; i++){
	  				str += checkStatus.data[i].id + ";";
	  			}
	  			str = str.substr(0, str.length - 1);
	  			
	  			var param = {ids: str};
	  			jQuery.ajax({
					url: '[[@{/}]]rest/mat/baseManager/delItem',
					async: true,
					//dataType: 'json',
					contentType: "application/json",
					type: 'post',
					data: JSON.stringify(param),//self.addParam,
					success: function(res){
						//console.log(res);
						self.queryList();
					}
				});
	  		},
	  		updateItem: function(){
	  			var self = this;
	  			self.addParam.is_start = self.addParam.is_start ? 1 : 0;
	  			self.addParam.yfk_flag = self.addParam.yfk_flag ? 1 : 0;
	  			self.addParam.js_flag = self.addParam.js_flag ? 1 : 0;
	  			self.addParam.dt_flag = self.addParam.dt_flag ? 1 : 0;
	  			self.addParam.xf_flag = self.addParam.xf_flag ? 1 : 0;
	  			self.addParam.gsgdgq_flag = self.addParam.gsgdgq_flag ? 1 : 0;
	  			
				jQuery.ajax({
					url: '[[@{/}]]rest/mat/baseManager/updateItem',
					async: true,
					//dataType: 'json',
					contentType: "application/json",
					type: 'post',
					data: JSON.stringify(jQuery.extend({id: window.updateId}, self.addParam)),//self.addParam,
					success: function(res){
						layui.use('layer', function(){
							var layer = layui.layer;
							layer.closeAll();
						});
						self.queryList();
					}
				});
	  		},
	  		addItem: function(){
	  			var self = this;
	  			self.addParam.is_start = self.addParam.is_start ? 1 : 0;
	  			self.addParam.yfk_flag = self.addParam.yfk_flag ? 1 : 0;
	  			self.addParam.js_flag = self.addParam.js_flag ? 1 : 0;
	  			self.addParam.dt_flag = self.addParam.dt_flag ? 1 : 0;
	  			self.addParam.xf_flag = self.addParam.xf_flag ? 1 : 0;
	  			self.addParam.gsgdgq_flag = self.addParam.gsgdgq_flag ? 1 : 0;
	  			
				jQuery.ajax({
					url: '[[@{/}]]rest/mat/baseManager/addItem',
					async: true,
					//dataType: 'json',
					contentType: "application/json",
					type: 'post',
					data: JSON.stringify(self.addParam),//self.addParam,
					success: function(res){
						//console.log(res);
						layui.use('layer', function(){
							var layer = layui.layer;
							layer.closeAll();
						});
						self.queryList();
					}
				});
	  			
	  		},
	  		closeAddItem: function(){
	  			var self = this;
	  			layui.use('layer', function(){
					var layer = layui.layer;
					layer.close(self.addIndex);
				});
	  		},
	  		toUpdate: function(){
	  			var checkStatus = window.myTable.checkStatus('mainList'); //idTest 即为基础参数 id 对应的值
	  			if(checkStatus.data.length == 0){
	  				return;
	  			}
	  			window.updateId = checkStatus.data[0].id;
	  			//alert(window.updateId);
	  			this.toAdd();
	  		},
	  		toAdd: function(){
	  			var self = this;
	  			layui.use('layer', function(){
					var layer = layui.layer;
					
					self.addIndex = layer.open({
					  type: 1,
					  shade: false,
					  title: false, //不显示标题
					  content: $('#addDiv') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
					  
					});
	  			});
	  		}
			,queryList: function(){
				var self = this;
				layui.use('table', function(){
				  var table = layui.table;
				  window.myTable = table;
				  //var xh= $(window).height() -($("#projectList").height()+$("#mainList").offset().top-$(document).scrollTop());
				  var xh = 400;
				  table.render({
				    elem: '#mainList'
				    ,method: "get"
				    ,url: '[[@{/}]]rest/mat/baseManager/queryItemList'
				    ,where: self.queryParam
				    ,page: true
				    ,parseData: function(res){ //res 即为原始返回的数据
				        return {
				          "code": 0, //解析接口状态
				          "msg": res.msg, //解析提示文本
				          "count": res.data.total, //解析数据长度
				          "data": res.data.list //解析数据列表
				        };
				    }
				    ,request: {
				        pageName: 'currentPage' //页码的参数名称，默认：page
				        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				    }
				    ,cols: [ [
				    	{type:'checkbox'}

  ,{field:'item_name', width:200, title: '要件名称'}
  ,{field:'is_start', width:200, title: '启用',templet:function(row){return row.is_start == 1 ? "√" : "";}}
  ,{field:'yfk_flag', width:80, title: '预付款',templet:function(row){return row.yfk_flag == 1 ? "√" : "";}}
  ,{field:'js_flag', title: '结算', width:200,templet:function(row){return row.js_flag == 1 ? "√" : "";}}
  ,{field:'dt_flag', width:80,title: '电梯',templet:function(row){return row.dt_flag == 1 ? "√" : "";}}
  ,{field:'xf_flag', width:80,title: '消防',templet:function(row){return row.xf_flag == 1 ? "√" : "";}}
  ,{field:'gsgdgq_flag', title: '供水、供电、供气', width:200,templet:function(row){return row.gsgdgq_flag == 1 ? "√" : "";}}
  ,{field:'create_date', width:200, title: '创建时间', sort: false}
				    ] ]
				  });
			      
				});
				
			}
			
	  	},
	  	mounted: function(){
		  	this.queryList();
	  	}
	})
</script>
</html>